<template>
  <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
    <div style="padding: 10px;background-color: white;width: 100%">

      <Tabs type="card" @change="tabChange">
        <TabPane key="1" class="vxe-row">
          <template #tab>
            <span>基本信息</span>
          </template>
          <div style="border-top: 1px solid #cccccc;border-right: 1px solid #cccccc; ">
            <Row>
              <Col :span="12" class="zitem">
                <div class="zitem-title"><span style="color: red">* </span>模板名称模板名称模板名称模板名称模板名称模板名称模板名称</div>
                <div class="zitem-input">
                  <vxe-input v-model="vform.data.name" />
                </div>
              </Col>
              <Col :span="12" class="zitem">
                <div class="zitem-title"><span style="color: red">* </span>所属分类</div>
                <div class="zitem-input">
                  <vxe-input v-model="vform.data.catename" suffix-icon="vxe-icon--search" readonly @click="selectCate"></vxe-input>
                </div>
              </Col>
            </Row>
            <Row>
              <Col :span="24">
                <div class="zitem">
                  <div class="zitem-title"><span style="color: red">* </span>模板备注</div>
                  <div class="zitem-input">
                    <vxe-textarea v-model="vform.data.notes" placeholder="请输入备注"
                                  :autosize="{minRows: 4, maxRows: 6}"></vxe-textarea>
                  </div>
                </div>
              </Col>
            </Row>
          </div>


        </TabPane>

        <TabPane key="2" class="vxe-row">
          <template #tab>
            <span>审批内容</span>
          </template>
          待开发
        </TabPane>

        <TabPane key="3" class="vxe-row">
          <template #tab>
            <span>流程配置</span>
          </template>
          <!--<WfDemo2 ref="xFlow" />-->
          <PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
            <Modeler @bpmnMounted="bpmnMounted"/>
            <Panel />
            <BpmnActions />
          </PageWrapper>
        </TabPane>

        <TabPane key="4" class="vxe-row">
          <template #tab>
            <span>权限配置</span>
          </template>
          这个也待开发
        </TabPane>

        <template #rightExtra>
          <vxe-button @click="handleSubmit()" status="primary">保 存</vxe-button>
        </template>
      </Tabs>
    </div>
    <TreeModal ref="xTree" @select="cateSelect" />
  </PageWrapper>
</template>
<script lang="ts">
export default { name: "WfTemMainEdit", inheritAttrs: false, customOptions: {} };
</script>
<script lang="ts" setup>
import { PageWrapper } from "/@/components/Page";
import { ref, computed, reactive, toRaw, onMounted } from "vue";
import { Row, Col, Tabs, TabPane } from "ant-design-vue";
import { defHttp } from "/@/utils/http/axios";
import WfDemo2 from "/@/pages/wf/demo2/index.vue";
import { useTabs } from "/@/hooks/web/useTabs";
import TreeModal from "/@/comps/org/TreeModal.vue";
import Modeler from "/@/comps/Activiti/Modeler";
import Panel from "/@/comps/Activiti/panel";
import BpmnActions from "/@/comps/Activiti/bpmn-actions";
import { BpmnStore } from "/@/comps/Activiti/Bpmn/store";


import { useRoute } from "vue-router";

const route = useRoute();
const id = ref(route.params?.id).value;
const cateid = ref(route.query?.cateid).value;

async function init() {
  if(cateid){
    const cate = await defHttp.get({ url: "/wf/tem/cate/one/" + cateid });
    vform.data.catename = cate.name;
    vform.data.cateid = cate.id;
  }
  // vform.data.cate={id:cate.id,name:cate.name};

}

async function fetch() {
  vform.data = await defHttp.get({ url: "/wf/tem/main/one/" + id });
  // console.log(vform.data.xml);

  // console.log(vform.data);
}

async function bpmnMounted(){
  if(vform.data.id!="new"){
    console.log(1111);
    await BpmnStore.importXML(vform.data.xml);
  }
}

async function tabChange(key){
  if(key==3){
    // await BpmnStore.importXML(vform.data.xml);
  }
}


onMounted(() => {
  if (id == "new") {
    init();
  } else {
    fetch();
  }
});

const xTree = ref({} as any);
const emit = defineEmits(["success", "register"]);
const { closeCurrent } = useTabs();

const vform = reactive({
  url: "/wf/tem/main",
  data: {} as any
});

// const xFlow = ref({} as any);

async function handleSubmit() {

  const bpmn= await BpmnStore.getXML()
  // console.log(bpmn.xml);
  // console.log(typeof (bpmn.xml));
  // xFlow.value.getData();
  vform.data.xml=bpmn.xml;

  if (vform.data["id"]) {
    await defHttp.put({ url: vform.url, data: vform.data });
  } else {
    await defHttp.post({ url: vform.url, data: vform.data });
  }
  await closeCurrent();
}

function selectCate() {
  xTree.value.open({ url: "/wf/tem/cate/tree" });
}

function cateSelect(data) {
  vform.data.cate = data;
  if (data != null) {
    vform.data.catename = data.name;
    vform.data.cateid = data.id;
  } else {
    vform.data.catename = null;
    vform.data.cateid = null;
  }
}


</script>

<style>
.zitem {
  display: table;
  width: 100%;
  height: 41px;
}

.zitem-title {
  display: table-cell;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 6px;
  background-color: #f6f6f6;
  text-align: right;
  width: 180px;
  min-width: 180px;
  vertical-align: middle;
}

.zitem-input {
  display: table-cell;
  border-left: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 4px;
  vertical-align: middle;
}

.zitem-input .vxe-input {
  width: 100%;
}

.zitem-input .vxe-textarea--inner {
  margin-bottom: -6px;
}

</style>
